<template>
  <view>
    <nav-bar :title="pageTitle"></nav-bar>
    <scroll-view scroll-y :style="{ height: scrollHeight }">
      <view class="video-box">
        <video
          class="video"
          :src="chooseVideo.videoUrl"
          controls="controls"
        ></video>
      </view>
      <view class="videos-box">
        <view class="videos-item" v-for="(item, index) in videoConfig" :key="index">
          <view class="videos-title">{{ item.name }}</view>
          <view class="no-video" v-if="!(planDetail[item.videosName] && planDetail[item.videosName].length)">暂无课程</view>
          <scroll-view v-else class="scroll-video-box" scroll-x="true">
            <view
              v-for="(vItem, vIndex) in planDetail[item.videosName]"
              :key="vIndex"
              class="scroll-video-item"
              @click="clickVideoItem(vItem, item)"
            >
              <view :class="['video-item', vItem.id === chooseVideo.id ? 'active-item' : '']">
                <video
                  class="video"
                  :src="vItem.videoUrl"
                  :controls="false"
                  :show-center-play-btn="false"
                ></video>
              </view>
              <view class="video-name">{{ vItem.title }}</view>
            </view>
          </scroll-view>
        </view>
      </view>
      <!-- <view class="detail-box">
        <view class="title-box">
          <view class="title">{{ planDetail.videos[activeVideo].title }}</view> -->
          <!-- <view class="active-collect-box" v-if="planDetail.isCollected === 1" @click="cancelCollect">
            <uni-icons type="heart-filled" color="#115BAA" size="18"></uni-icons>
            <view class="text">已收藏</view>
          </view>
          <view class="collect-box" v-else @click="clickCollect">
            <uni-icons type="heart" size="18"></uni-icons>
            <view class="text">收藏</view>
          </view> -->
        <!-- </view>
      </view> -->
      <view class="img-txt-detail">
        <view class="title">-下拉查看图文详情-</view>
        <view class="detail-item">
          <view class="courseIntro">
            <image
              class="courseIntro-img"
              :src="baseImgUrl + '/userImg/img_course_introduction.png'"
            />
            <rich-text :nodes="videoClassCourseIntro[chooseVideoClass] && videoClassCourseIntro[chooseVideoClass].courseIntro && videoClassCourseIntro[chooseVideoClass].courseIntro.replace(/\n/g, '<br/>') || '暂无'" class="courseIntro-text"></rich-text>
          </view>
          <view class="courseIntro">
            <image
              class="courseIntro-img"
              :src="baseImgUrl + '/userImg/img_course_type.png'"
            />
            <rich-text :nodes="videoClassCourseIntro[chooseVideoClass] && videoClassCourseIntro[chooseVideoClass].courseClass && videoClassCourseIntro[chooseVideoClass].courseClass.replace(/\n/g, '<br/>') || '暂无'" class="courseIntro-text"></rich-text>
          </view>
        </view>
    </view>
    </scroll-view>
    <view class="form_bottom_btn" v-if="planDetail.planState == 1">
      <view class="btn-box">
        <view class="confirm" @click="clickToFeedBack">去反馈</view>
      </view>
    </view>
  </view>
</template>

<script>
  import api_common from '@/api/common'
  import api_collect from '@/api/user.js'
  import { baseImgUrl } from '@/config'
  export default {
    name: 'TrainPlanDetail',
    data() {
      return {
        baseImgUrl,
        scrollHeight: '',
        pageTitle: '',
        planId: '',
        planDetail: {},
        planDetailConfig: [
          { title: '课程介绍', key: 'courseIntroduction' },
          { title: '课程类型', key: 'courseType' }
        ],
        isCollected: 0,
        chooseVideo: {},
        chooseVideoClass: '',
        videoConfig: [
          { name: '灵活性拉伸', videoClass: 1, videosName: 'flexibleStretchVideos' },
          { name: '强化肌肉核心', videoClass: 2, videosName: 'strengthenCoreVideos' },
          { name: 'ADL姿势改善', videoClass: 3, videosName: 'adlposturalImprovementVideos' },
          { name: '侧弯矫正训练', videoClass: 4, videosName: 'bendCorrectionTrainVideos' }
        ],
        videoClassCourseIntro: {
          1: {
            courseIntro: '灵活性拉伸是提升肌肉弹性，扩大关节间隙及灵活性，放松肌肉和缓解疲劳疼痛的一种训练方法。在训练前后进行拉伸运动，有利于放松紧张和疲劳的肢体肌肉和关节，帮助肌肉中的乳酸排出，优化身体线条，缓解肌肉劳损，减少肌肉之间的粘连，使身体更加灵活，肌肉更有力。脊柱侧弯患者的脊柱两侧肌力不平衡，椎体间隙变窄，灵活性拉伸能够缓解和拉伸过度紧张的肌肉，让脊柱重新恢复活力，释放脊柱周围肌群的紧张感，放松身体，给椎体创造空间，让身体更挺拔，提升身体的灵活性和协调性，改善含胸驼背等不良体态。',
            courseClass: '灵活性拉伸'
          },
          2: {
            courseIntro: '强化肌肉核心，核心的组成包括髋关节-骨盆-腰椎(称为LPHC结构)，核心力量是维持脊柱和骨盆稳定，局部稳定系统→全身稳定系统→动作系统是从内到外的关系，它们一起提供整个核心的动态稳定性，是所有运动的起点，是一切运动的基础。对于脊柱侧弯来说，如果内部和外部核心肌肉不平衡，那么动力链就无法正确传递和利用力量，从而导致低效动作、代偿以及损伤。脊柱侧弯训练核心的目标是维持椎体间稳定性(局部稳定系统)、脊柱-骨盆间稳定性(全身稳定系统)、功能性力量(动作系统)。从而帮助脊柱侧弯患者稳定脊柱两侧肌肉力量，进一步提高运动活动的安全性高效性。',
            courseClass: '强化肌肉核心'
          },
          3: {
            courseIntro: 'ADL是日常生活活动能力（activities of daily living，ADL），是指人们在每日生活中，为了照料自己的衣、食、住、行，保持个人卫生整洁和进行独立的社区活动所必需的一系列基本活动，是人们为了维持生存及适应生存环境而每天必须反复进行的、最基本的、最具有共性的活动。在日常生活中，无论是成人还是小朋友，应当尽可能采用矫正位的姿势去生活，学习，参加活动。抑制脊柱的不均衡负重，让脊柱时刻处于被矫正状态，并结合康复训练和支具矫正，才能有效阻止侧弯恶化。不同弯型的脊柱侧弯，有不同的矫正位姿势，需在专业老师指导下进行练习。',
            courseClass: 'ADL姿势改善'
          },
          4: {
            courseIntro: '脊柱侧弯特定性训练( physiotherapy scoliosis specific exercise， PSSE) 是国际脊柱侧凸矫形与康复治疗协会 (Society on Scoliosis Orthopedic and Rehabilitation Treatment SOSORT) 推荐的脊柱侧凸保守治疗方法。该训练通过改善呼吸肌控制能力，增加肺容量，加强脊柱的本体感受和运动控制，在功能为上建立新的正确的姿势模式，从而改善脊柱畸形，减少侧凸进展。现有证据表明PSSE有助于稳定脊柱畸形,提高患者生活质量。',
            courseClass: '侧弯矫正训练'
          }
        },
        items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7', 'Item 8', 'Item 9', 'Item 10']
      }
    },
    onLoad(options) {
      this.pageTitle = options.title || ''
      this.planId = options.planId
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 64 + 'px'
      this.getPlanDetail()
    },
    methods: {
      getPlanDetail() {
        const params = {
          id: this.planId
        }
        api_common.fetchPlanDetail(params).then(res => {
          if (res.code !== 200) return
          const result = res.data
          this.planDetail = {
            ...result,
            patientName: this.patientName,
            date: result.startDate + '至' + result.endDate
          }
          if (this.planDetail.planState === 2) {
            this.detailHeight = this.$store.getters.heightData.noTabMainHeight - 66 + 'px'
          } else {
            this.detailHeight = this.$store.getters.heightData.noTabMainHeight - 10 + 'px'
          }
          this.chooseVideo = this.planDetail.flexibleStretchVideos[0]
          this.chooseVideoClass = 1
        })
      },
      // 收藏
      clickCollect(){
        let flag = false
        if (this.planDetail.isCollected === 1) {
          flag = true; 
          this.planDetail.isCollected === 0 
        } else{
          flag = false;
          this.planDetail.isCollected === 1 
        }
        const params = {
          videoId: this.id,
        }
        api_collect.addCollect(params).then(res => {
          if (res.code !== 200) return
          wx.showToast({
            title: flag ? '取消成功' : '收藏成功',
            icon: 'success'
            })
          this.getPlanDetail()
    })
    },
      // 取消收藏
      cancelCollect(){
        const params = {
          ids: this.id,
        };
        api_collect.deleteCollect(params).then(res => {
          if (res.code !== 200) return
          this.getPlanDetail()
        })
      },
      clickVideoItem(vItem, item) {
        this.chooseVideo = vItem
        this.chooseVideoClass = item.videoClass
      },
      clickToFeedBack() {
        uni.navigateTo({
          url: `/subPages/userTrainPlan/trainFeedback?planId=${this.planId}`
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .video-box {
    padding: 30rpx;
    background-color: #FFF;
    .video {
      width: 690rpx;
      height: 460rpx;
      border-radius: 16rpx;
    }
  }
  
  .detail-box {
    margin: 20rpx 30rpx 30rpx;
    padding: 30rpx;
    background-color: #FFF;
    .title-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 32rpx;
        font-weight: 500;
        color: #000;
      }
      .collect-box,
      .active-collect-box {
        display: flex;
        .text {
          margin-left: 6rpx;
          font-size: 24rpx;
        }
      }
      .active-collect-box {
        .text {
          color: #115BAA;
        }
      }
    }
    .desc-box {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #808080;
    }
  }
  .videos-box {
    margin: 30rpx;
    padding: 30rpx 45rpx;
    border-radius: 16rpx;
    background-color: #fff;
    .videos-title {
      display: inline-block;
      padding: 10rpx 60rpx 10rpx 30rpx;
      border-radius: 8rpx 70rpx 0 8rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #8e4415;
      background: linear-gradient(to right, #ffeccb, #fed497);
    }
    .no-video {
      padding: 30rpx 0;
    }
    .scroll-video-box {
      white-space: nowrap;
      width: 100%;
      padding: 20rpx 0;
    }
    .scroll-video-item {
      display: inline-block;
      width: 228rpx;
      height: 152rpx;
      margin-right: 20rpx;
      .video-item {
        width: 100%;
        height: 100%;
        .video {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }
      .video-name {
        width: 228rpx;
        font-size: 24rpx;
        white-space: pre-wrap; /* 使文本可以自动换行 */
      }
      .active-item {
        border: 4rpx solid #2a82e4;
      }
    }
  }
  .img-txt-detail {
    margin: 0 30rpx 30rpx;
    padding: 0 45rpx 30rpx;
    border-radius: 16rpx;
    background-color: #FFF;
    .title {
      padding: 28rpx 0 10rpx;
      text-align: center;
      font-size: 24rpx;
      color: #999;
    }
    .detail-item {
      // .detail-img {
      //   width: 100%;
      //   height: auto;
      // }
      background: #FFF;
      .courseIntro {
        display: block;
        margin-top: 30rpx;
        background: #fff;
        border-radius: 12rpx;
        position: relative;
        .intro-icon {
          position: absolute;
          left: 0;
          top: 0;
          height: 40rpx;
          padding: 0 14rpx;
          border-radius: 16rpx 0 16rpx 0;
          line-height: 40rpx;
          font-size: 20rpx;
          color: #FFF;
          background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
        }
        .courseIntro-img {
          width: 270rpx;
          height: 66rpx;
        }
        .courseIntro-text {
          display: block;
          padding: 20rpx 0 20rpx 20rpx;
        }
      }
    }
  }
	
</style>
